<template>
  <el-card :bordered="false" class="storeOrderDetails">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 采购入库 -->
      <div v-if="this.$route.query.flag == 1">
        <el-card
          class="box-card"
          shadow="never"
          style="margin: 20px 0;background-color:rgba(215, 215, 215, 0.5);"
        >
          <div slot="header" class="clearfix">
            <h3 class="header_title">{{status?'待入库':'已完成'}}</h3>
          </div>
          <el-row :gutter="10">
            <div v-if="status">
              <el-col :xs="8" :md="8">
                <el-form-item label="采购订单："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="创单人："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="制单时间："></el-form-item>
              </el-col>
            </div>

            <div v-if="!status">
              <el-col :xs="8" :md="8">
                <el-form-item label="入库日期："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="入库凭证："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="备注："></el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-card>

        <!-- 入库信息 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>入库信息</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="入库方："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库地址："></el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 供应商信息 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>供应商信息</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="供应商："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人："></el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 配送信息 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>配送信息</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8" v-if="!status">
              <el-form-item label="供应商配送单号："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="配送状态："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="发出时间："></el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>采购商品明细</h3>
          </div>
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <h3>门店名称</h3>
            </div>
            <el-row :gutter="10">
              <el-col :xs="8" :md="8" v-if="!status">
                <el-form-item label="门店采购单："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="创单人："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="制单时间："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8" v-if="!status">
                <el-form-item label="门店地址："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="备注："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="联系人："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="联系人手机号："></el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <buyingIfor ref="buyingIfor" style="margin:20px 0px 0px 0px" :status="status" />
        </el-card>

        <div class="content">
          <el-button @click="goIn('ruleForm')" type="primary" v-if="status">前往门店采购单</el-button>
          <el-button @click="save('ruleForm')" type="primary" v-if="!status">入库</el-button>
          <el-button @click="quxiao('ruleForm')">返 回</el-button>
        </div>
      </div>

      <!-- 门店退货入库 -->
      <div v-if="this.$route.query.flag == 2">
        <el-card
          class="box-card"
          shadow="never"
          style="margin: 20px 0;background-color:rgba(215, 215, 215, 0.5);"
        >
          <div slot="header" class="clearfix">
            <h3 class="header_title">{{status?'待入库':'已完成'}}</h3>
          </div>
          <el-row :gutter="10">
            <div>
              <el-col :xs="8" :md="8">
                <el-form-item label="门店退货单："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="创单人："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="制单时间："></el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-card>

        <!-- 入库信息 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>入库信息</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="入库方："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="入库地址："></el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 供应商信息 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>门店信息</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="门店名称："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系电话："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="联系人："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="门店地址："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="退货原因："></el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 关联单据 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;" v-if="!status">
          <div slot="header" class="clearfix">
            <h3>关联单据</h3>
          </div>
          <el-row :gutter="10">
            <el-col :xs="8" :md="8">
              <el-form-item label="门店采购单："></el-form-item>
            </el-col>
            <el-col :xs="8" :md="8">
              <el-form-item label="门店入库单："></el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 商品明细 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>商品明细</h3>
          </div>
          <buyingIfor ref="buyingIfor" style="margin:20px 0px 0px 0px" :status="!status" />
        </el-card>

        <div class="content">
          <el-button @click="save('ruleForm')" type="primary" v-if="!status">入库</el-button>
          <el-button @click="quxiao('ruleForm')">返 回</el-button>
        </div>
      </div>
      <!-- 其他入库 -->
      <div v-if="this.$route.query.flag == 3">
        <el-card
          class="box-card"
          shadow="never"
          style="margin: 20px 0;background-color:rgba(215, 215, 215, 0.5);"
        >
          <div slot="header" class="clearfix">
            <h3 class="header_title">{{status?'待入库':'已完成'}}</h3>
          </div>
          <el-row :gutter="10">
            <div>
              <el-col :xs="8" :md="8">
                <el-form-item label="门店退货单："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="创单人："></el-form-item>
              </el-col>
              <el-col :xs="8" :md="8">
                <el-form-item label="制单时间："></el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-card>
        <!-- 商品明细 -->
        <el-card class="box-card" shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <h3>商品明细</h3>
          </div>
          <buyingIfor ref="buyingIfor" style="margin:20px 0px 0px 0px" :status="!status" />
        </el-card>

        <div class="content">
          <!-- <el-button @click="save('ruleForm')" type="primary" v-if="!status">入库</el-button> -->
          <el-button @click="quxiao('ruleForm')">返 回</el-button>
        </div>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.storeOrderDetails {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .mdweizhi {
    display: flex;
    .jwd {
      span {
        padding-right: 10px;
      }
      .el-form-item__label {
        text-align: right;
        width: 50px !important;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        margin-right: 20px;
      }
    }
  }
  .box-card {
    .header_title {
      background: rgba(102, 204, 102, 1);
      display: inline-block;
      padding: 5px 10px;
      color: #fff;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    h3 {
      margin: 0;
    }
  }
}
</style>
